<template>
  <div class="chat">
    <el-card shadow="none">
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-input
                placeholder="请输入关键词"
                v-model="searchParams.keyword"
                style="margin-right: 20px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <div style="text-align: right; width: 100%">
                <el-button type="primary" @click="onOpenPublish">发布</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div style="padding: 20px 20px; overflow: auto">
      <el-row :gutter="12">
        <el-col :span="24" v-for="item in list" style="margin-bottom: 20px">
          <el-card shadow="none">
            <div class="comment-item">
              <div style="padding-right: 12px">
                <el-image style="width: 120px; height: 120px" :src="item.post_url"></el-image>
              </div>
              <div style="flex-grow: 1">
                <div class="comment-item-header">
                  <span style="font-weight: bold; font-size: 14px">{{ item.title }}</span>
                  <span>{{ item.create_time }}</span>
                </div>
                <div style="padding: 12px 0; font-size: 12px; color: #666">
                  {{ item.desc }}
                </div>
              </div>
            </div>
            <template #footer>
              <div style="text-align: right">
                <el-link type="text" @click="onDetail(item)">查看详情</el-link>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { getNewsList } from '@/api/material';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const onDetail = (item) => {
  console.log(item.id);
  router.push({
    path: '/spreadDetail',
    query: {
      id: item.id,
    },
  });
};
const searchParams = ref({
  keyword: '',
});

const onSearch = () => {
  getList();
};
const onReset = () => {
  searchParams.value.keyword = '';
};

const list = ref([]);
const getList = () => {
  getNewsList({
    keyword: searchParams.value.keyword,
  }).then((res) => {
    list.value = res.data.data.map((item) => {
      return {
        ...item,
      };
    });
  });
};
onMounted(() => {
  onSearch();
});
</script>
<style lang="less">
.comment-item {
  padding-top: 12px;
  display: flex;
  .comment-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.chat {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  padding-top: 70px;
  .comment-desc {
    padding: 12px 0;
    line-height: 24px;
    font-size: 12px;
    color: #666666;
  }
}
</style>
